SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>CSS animations</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">CSS animations</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style>

/* start https://en.wikipedia.org/ */

.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media(min-width:640px){body.skin--responsive .mw-parser-output .infobox-table{display:table!important}body.skin--responsive .mw-parser-output .infobox-table>caption{display:table-caption!important}body.skin--responsive .mw-parser-output .infobox-table>tbody{display:table-row-group}body.skin--responsive .mw-parser-output .infobox-table th,body.skin--responsive .mw-parser-output .infobox-table td{padding-left:inherit;padding-right:inherit}}

/* end https://en.wikipedia.org/ */

</style><table class="infobox hproduct"><caption class="infobox-title fn">CSS Animations</caption><tbody><tr><td colspan="2" class="infobox-subheader">CSS Animations Level 1</td></tr><tr><td colspan="2" class="infobox-image"><div class="infobox-caption"><a class="external text external" href="https://upload.wikimedia.org/wikipedia/commons/2/2a/Contra-zoom_aka_dolly_zoom_animation.svg">Interactive SVG</a> using a <i>hover</i> effect</div></td></tr><tr><th scope="row" class="infobox-label">Abbreviation</th><td class="infobox-data">CSS-ANIMATIONS-1</td></tr><tr><th scope="row" class="infobox-label">Native name</th><td class="infobox-data"><div class="nickname" lang="en">CSS Animations</div></td></tr><tr><th scope="row" class="infobox-label">Status</th><td class="infobox-data"><a href="World_Wide_Web_Consortium#Working_draft_(WD)" title="World Wide Web Consortium">W3C Working Draft</a></td></tr><tr><th scope="row" class="infobox-label">First published</th><td class="infobox-data">20 March 2009<span style="display: none;"> (<span class="bday dtstart published updated itvstart">2009-03-20</span>)</span><sup id="cite_ref-history_1-0" class="reference"><a href="#cite_note-history-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></td></tr><tr><th scope="row" class="infobox-label">Latest version</th><td class="infobox-data">Level 1<br>March 2, 2023<span style="display: none;"> (<span class="bday dtstart published updated itvstart">2023-03-02</span>)</span><sup id="cite_ref-w3c-draft_2-0" class="reference"><a href="#cite_note-w3c-draft-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></td></tr><tr><th scope="row" class="infobox-label">Preview version</th><td class="infobox-data">Level 2<br>March 2, 2023<span style="display: none;"> (<span class="bday dtstart published updated itvstart">2023-03-02</span>)</span><sup id="cite_ref-w3c-editor-draft_3-0" class="reference"><a href="#cite_note-w3c-editor-draft-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup></td></tr><tr><th scope="row" class="infobox-label">Organization</th><td class="infobox-data"><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a></td></tr><tr><th scope="row" class="infobox-label">Committee</th><td class="infobox-data"><a href="CSS_Working_Group" title="CSS Working Group">CSS Working Group</a></td></tr><tr><th scope="row" class="infobox-label">Editors</th><td class="infobox-data"><style data-mw-deduplicate="TemplateStyles:r1126788409">

/* start https://en.wikipedia.org/ */

.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}

/* end https://en.wikipedia.org/ */

</style><div class="plainlist">

<ul><li>Dean Jackson</li>

<li><a href="David_Baron_(computer_scientist)" title="David Baron (computer scientist)">L. David Baron</a></li>

<li>Tab Atkins Jr.</li>

<li>Brian Birtles</li>

<li>David Hyatt</li>

<li>Chris Marrin</li>

<li>Sylvain Galineau</li></ul>

</div><sup id="cite_ref-w3c-draft_2-1" class="reference"><a href="#cite_note-w3c-draft-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></td></tr><tr><th scope="row" class="infobox-label">Base standards</th><td class="infobox-data"><a href="CSS" title="CSS">CSS</a></td></tr><tr><th scope="row" class="infobox-label">Domain</th><td class="infobox-data"><a href="CSS" title="CSS">CSS</a></td></tr><tr><th scope="row" class="infobox-label">Website</th><td class="infobox-data"><span class="url"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-animations-1/">www<wbr>.w3<wbr>.org<wbr>/TR<wbr>/css-animations-1<wbr>/</a></span></td></tr></tbody></table>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1246091330">

/* start https://en.wikipedia.org/ */

.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1239334494">

/* start https://en.wikipedia.org/ */

@media screen{html.skin-theme-clientpref-night .mw-parser-output div:not(.notheme)>.tmp-color,html.skin-theme-clientpref-night .mw-parser-output p>.tmp-color,html.skin-theme-clientpref-night .mw-parser-output table:not(.notheme) .tmp-color{color:inherit!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output div:not(.notheme)>.tmp-color,html.skin-theme-clientpref-os .mw-parser-output p>.tmp-color,html.skin-theme-clientpref-os .mw-parser-output table:not(.notheme) .tmp-color{color:inherit!important}}

/* end https://en.wikipedia.org/ */

</style><table class="sidebar nomobile nowraplinks"><tbody><tr><th class="sidebar-title" style="background:rgba(51,51,255,0.24);display:block;margin-bottom:0.25em; color: inherit;"><a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a></th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">

<ul><li><a href="Style_sheet_(web_development)" title="Style sheet (web development)">Style sheet</a></li>

<li><a href="CSS_Zen_Garden" title="CSS Zen Garden">CSS Zen Garden</a></li></ul></td>

</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">

Concepts</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">

<ul>

<li><a href="CSS_box_model" title="CSS box model">Box model</a></li>

<li><a href="Flexbox" title="Flexbox">Flexbox</a></li>

<li><a href="CSS_image_replacement" title="CSS image replacement">Image replacement</a></li></ul></td>

</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">

Philosophies</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">

<ul><li><a href="Tableless_web_design" title="Tableless web design">Tableless</a></li>

<li><a href="Responsive_web_design" title="Responsive web design">Responsive</a></li>

<li><a href="Holy_grail_(web_design)" title="Holy grail (web design)">"Holy grail"</a></li></ul></td>

</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">

Tools</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">

<li><a href="Stylus_(stylesheet_language)" class="mw-redirect" title="Stylus (stylesheet language)">Stylus</a></li></ul></td>

</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">

Comparisons</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">

<ul><li><a href="Comparison_of_stylesheet_languages" title="Comparison of stylesheet languages">Stylesheet languages</a></li></ul></td>

</tr><tr><td class="sidebar-below plainlist" style="background:rgba(51,51,255,0.16); display:block;margin-top:0.4em;color:inherit;">

<ul><li><span class="noviewer" typeof="mw:File"></span> <a href="https://en.wikibooks.org/wiki/Cascading_Style_Sheets" class="extiw external" title="b:Cascading Style Sheets"><span class="tmp-color" style="color:#002bb8">Cascading Style Sheets</span></a></li></ul></td></tr><tr><td class="sidebar-navbar"><style data-mw-deduplicate="TemplateStyles:r1239400231">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></td></tr></tbody></table>

<p><b>CSS animations</b> is a module for <a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a> that allows the <a href="Animation" title="Animation">animation</a> of <a href="HTML" title="HTML">HTML</a> document elements using CSS.

</p>

<div class="mw-heading mw-heading2"><h2 id="History">History</h2></div>

<p>While the pseudo-class <code>:hover</code> has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s decade. As early as 2007, <a href="WebKit" title="WebKit">WebKit</a> had announced its intent to include CSS animation, transitions, and transforms as features of WebKit. It also announced the implementation of both implicit and explicit animation through CSS in February 2009. CSS animation has also been put forth as a feature of CSS3, the ongoing draft specification managed by the <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C).

</p>

<div class="mw-heading mw-heading2"><h2 id="Current">Current</h2></div>

<p>CSS Animations is a module of Cascading Style Sheets. It allows users to hover over objects and an animation will play. Currently, it is adopted by all major search engines. Despite the controversy from those who prefer animation via Javascript, the hover tag is now widely used across the Cascading Style Sheets community.

</p>

<div class="mw-heading mw-heading2"><h2 id="Scalable_Vector_Graphics">Scalable Vector Graphics</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div role="note" class="hatnote navigation-not-searchable">Main article: <a href="SVG_animation#SVG_animation_using_CSS" title="SVG animation">SVG animation § SVG animation using CSS</a></div>

<p>In addition to <i>hover</i>, <a href="Scalable_Vector_Graphics" class="mw-redirect" title="Scalable Vector Graphics">Scalable Vector Graphics</a> supports the <code><i>@keyframes</i></code> at-rule, allowing a limited set of transformations to be animated. Firefox and Chrome used the <code><i>@-moz-keyframes</i></code> and <code><i>@-webkit-keyframes</i></code> extensions, respectively, before <code><i>@keyframes</i></code> was added to the CSS 3 specification.<sup id="cite_ref-w3c-draft_2-2" class="reference"><a href="#cite_note-w3c-draft-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Browser_support">Browser support</h2></div>

<p>As of June 2011, Firefox 5 includes CSS animations support.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> CSS animation is also available as a module in the nightly builds of WebKit as well as <a href="Google_Chrome" title="Google Chrome">Google Chrome</a>, <a href="Safari_(web_browser)" title="Safari (web browser)">Safari</a> 4 and 5 and Safari for <a href="IOS" title="IOS">iOS</a> (iPhone, iPod Touch, iPad), <a href="Android_(operating_system)" title="Android (operating system)">Android</a> versions 2.x and 3.x, <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 10+ and <a href="Microsoft_Edge" title="Microsoft Edge">Microsoft Edge</a> browser, the BlackBerry OS 6 web browser, with the <code>-webkit-</code> prefix.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> It is also used in <a href="ITunes" title="ITunes">iTunes</a> 9 to support <a href="ITunes_LP" title="ITunes LP">iTunes LP</a> files.

</p>

<div class="mw-heading mw-heading2"><h2 id="Controversy">Controversy</h2></div>

<p>Early on in the development of the CSS animation it had drawn concern from those who prefer animation via <a href="JavaScript" title="JavaScript">JavaScript</a><sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> or, to a lesser-used extent, <a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">Synchronized Multimedia Integration Language</a> (SMIL); others have claimed that it is a move by <a href="Apple_Inc." title="Apple Inc.">Apple Inc.</a>, the main sponsor of the WebKit project, to sidestep the inclusion of <a href="Adobe_Flash" title="Adobe Flash">Adobe Flash</a> (and the incumbent <a href="Flash_animation" title="Flash animation">Flash animations</a>) on the company's <a href="IOS" title="IOS">iOS</a> line of mobile devices which use <a href="Safari_(web_browser)" title="Safari (web browser)">Safari</a>.<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> Furthermore, although Cascading Style Sheets is a relatively easy to use programming language, many programmers still struggle with making animations. With this problem, several individuals and websites have developed and created open source CSS button animations with code<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> for users to copy. However, even with these previous controversies, CSS animations can be predominantly found and widely used across the internet.

</p>

<ul><li><a href="Flash_animation" title="Flash animation">Flash animation</a></li>

<li><a href="SVG_animation" title="SVG animation">SVG animation</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/standards/history/css-animations-1">"CSS Animations Level 1 Publication History - W3C"</a>. <i>W3C</i>. n.d<span class="reference-accessdate">. Retrieved <span class="nowrap">2021-04-09</span></span>.</cite></span>

</li>

<li id="cite_note-w3c-draft-2"><span class="mw-cite-backlink">^ <a href="#cite_ref-w3c-draft_2-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-w3c-draft_2-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-w3c-draft_2-2"><sup><i><b>c</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFJacksonBaronAtkins_Jr.Birtles2023" class="citation web cs1">Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (2023-03-02). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-animations-1/">"CSS Animations Level 1"</a>. <i>W3C</i>. CSS Working Group<span class="reference-accessdate">. Retrieved <span class="nowrap">2023-03-26</span></span>.</cite></span>

</li>

<li id="cite_note-w3c-editor-draft-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-w3c-editor-draft_3-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFBaronBirtles2023" class="citation web cs1">Baron, L. David; Birtles, Brian, eds. (2023-03-02). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2023/WD-css-animations-2-20230302/">"CSS Animations Level 2"</a>. <i>CSS Working Group Editor Drafts</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2023-03-26</span></span>.</cite></span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><cite class="citation cs2"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110811044717/https://www.mozilla.com/en-US/firefox/5.0/releasenotes/"><i>Mozilla Firefox Release Notes</i></a>, The Mozilla Foundation, 2011-06-21, archived from the original on 2011-08-11<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite><span class="cs1-maint citation-comment"><code class="cs1-code">{{citation}}</code>: CS1 maint: bot: original URL status unknown (link)</span></span>

</li>

<li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><cite id="CITEREFHyatt2007" class="citation cs2">Hyatt, Dave (2007-10-31), <a rel="nofollow" class="external text" href="http://webkit.org/blog/138/css-animation/">"CSS Animation | WebKit"</a>, <i>WebKit</i>, Surfin’ Safari<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><cite id="CITEREFJackson2009" class="citation cs2">Jackson, Dean (2009-02-05), <a rel="nofollow" class="external text" href="http://webkit.org/blog/324/css-animation-2/">"CSS Animation | WebKit"</a>, <i>WebKit</i>, Surfin’ Safari<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><cite class="citation cs2"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20181126005534/https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94)">"@keyframes rule (Internet Explorer)"</a>, <i>Microsoft Docs</i>, Microsoft, 2018-11-25, archived from <a rel="nofollow" class="external text" href="https://msdn.microsoft.com/en-us/ie/hh772747(v=vs.94)">the original</a> on 2018-11-26<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><cite id="CITEREFSnook2007" class="citation cs2">Snook, Jonathan (2007-10-31), <a rel="nofollow" class="external text" href="http://snook.ca/archives/javascript/css_animations_in_safari/"><i>CSS Animations in Safari</i></a>, Snook.ca, <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210127175208/http://snook.ca/archives/javascript/css_animations_in_safari/">archived</a> from the original on 2021-01-27<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><cite id="CITEREFKim2009" class="citation cs2">Kim, Arnold (2009-02-06), <a rel="nofollow" class="external text" href="http://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/"><i>CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?</i></a>, MacRumors.com<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><cite id="CITEREFPalmer2009" class="citation cs2">Palmer, Robert (2009-02-06), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20090209223736/http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/"><i>CSS Animation to replace need for Flash in MobileSafari? Not likely</i></a>, The Unofficial Apple Weblog, archived from <a rel="nofollow" class="external text" href="http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/">the original</a> on 2009-02-09<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><cite id="CITEREFFerrari2009" class="citation cs2">Ferrari, Vincent (2009-02-09), <a rel="nofollow" class="external text" href="http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html"><i>CSS Animations: A Flash Substitute?</i></a>, Apple Thoughts<span class="reference-accessdate">, retrieved <span class="nowrap">2021-04-09</span></span></cite></span>

</li>

<li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><cite id="CITEREFButtonAnimations2019" class="citation web cs1">ButtonAnimations (2019-12-11). <a rel="nofollow" class="external text" href="https://buttonanimations.github.io/">"Button Animations CSS (w/ code)"</a>. <i>ButtonAnimations</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2021-04-09</span></span>.</cite></span>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20080430041229/http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html">Initial Apple Proposal</a></li></ul>

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></div><div role="navigation" class="navbox" aria-labelledby="Animation_topics352" style="padding:3px"><table class="nowraplinks hlist mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Animation_topics352" style="font-size:114%;margin:0 4em"><a href="Animation" title="Animation">Animation</a> topics</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">By country</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Azerbaijani_animation" title="Azerbaijani animation">Azerbaijan</a></li>

<li><a href="Bangladeshi_animation" title="Bangladeshi animation">Bangladesh</a></li>

<li><a href="Bhutanese_animation" title="Bhutanese animation">Bhutan</a></li>

<li><a href="Brazilian_animation" title="Brazilian animation">Brazil</a></li>

<li><a href="British_animation" title="British animation">United Kingdom</a></li>

<li><a href="History_of_Canadian_animation" title="History of Canadian animation">Canada</a></li>

<li><a href="Chinese_animation" title="Chinese animation">China</a>

<ul><li><a href="History_of_Chinese_animation" title="History of Chinese animation">history</a></li></ul></li>

<li><a href="Czech_animation" title="Czech animation">Czechia</a></li>

<li><a href="Estonian_animation" title="Estonian animation">Estonia</a></li>

<li><a href="History_of_French_animation" title="History of French animation">France</a></li>

<li><a href="History_of_Hungarian_animation" title="History of Hungarian animation">Hungary</a></li>

<li><a href="Indian_animation_industry" title="Indian animation industry">India</a>

<ul><li><a href="History_of_animation_in_India" title="History of animation in India">history</a></li></ul></li>

<li><a href="Anime" title="Anime">Japan</a>

<ul><li><a href="History_of_anime" title="History of anime">history</a></li></ul></li>

<li>Korea

<ul><li><a href="North_Korean_animation" title="North Korean animation">North</a></li>

<li><a href="South_Korean_animation" title="South Korean animation">South</a></li>

<li><a href="History_of_Korean_animation" title="History of Korean animation">history</a></li></ul></li>

<li><a href="Latvian_animation" title="Latvian animation">Latvia</a></li>

<li><a href="Malaysian_animation" title="Malaysian animation">Malaysia</a></li>

<li><a href="Mexican_animation" title="Mexican animation">Mexico</a></li>

<li><a href="North_Korean_animation" title="North Korean animation">North Korea</a></li>

<li><a href="Filipino_animation" class="mw-redirect" title="Filipino animation">Philippines</a></li>

<li><a href="Portuguese_animation" title="Portuguese animation">Portugal</a></li>

<li><a href="Romanian_animation" title="Romanian animation">Romania</a></li>

<li><a href="History_of_Russian_animation" title="History of Russian animation">Russia</a></li>

<li><a href="Animation_industry_in_South_Africa" title="Animation industry in South Africa">South Africa</a></li>

<li><a href="Spanish_animation" title="Spanish animation">Spain</a></li>

<li><a href="Taiwanese_animation" title="Taiwanese animation">Taiwan</a></li>

<li><a href="Thai_animation" title="Thai animation">Thailand</a></li>

<li><a href="Ukrainian_animation" title="Ukrainian animation">Ukraine</a></li>

<li><a href="American_animation" title="American animation">United States</a>

<ul><li><a href="Animation_in_the_United_States_during_the_silent_era" title="Animation in the United States during the silent era">Silent Era</a></li>

<li><a href="Golden_age_of_American_animation" title="Golden age of American animation">The Golden Age</a></li>

<li><a href="World_War_II_and_American_animation" title="World War II and American animation">World War II</a></li>

<li><a href="Animation_in_the_United_States_in_the_television_era" title="Animation in the United States in the television era">Early TV broadcast era</a></li>

<li><a href="Modern_animation_in_the_United_States" title="Modern animation in the United States">Modern TV cable and streaming era</a></li></ul></li>

<li><a href="Vietnamese_animation" title="Vietnamese animation">Vietnam</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Industry</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Animator" title="Animator">Animator</a>

<li><a href="Animation_department" title="Animation department">Animation department</a></li>

<li><a href="Animation_director" title="Animation director">Animation director</a></li>

<li><a href="Story_artist" title="Story artist">Story artist</a></li>

<li><a href="Animation_studio" title="Animation studio">Animation studios</a>

<li><a href="Animation_database" title="Animation database">Animation database</a></li>

<li><a href="Art_pipeline" title="Art pipeline">Art pipeline</a></li>

<li>Biologist simulators</li>

<li>Animation film festivals

<ul><li><a href="List_of_international_animation_festivals" title="List of international animation festivals">international</a></li>

<li><a href="List_of_regional_animation_festivals" title="List of regional animation festivals">regional</a></li></ul></li>

<li><a href="List_of_highest-grossing_animated_films" title="List of highest-grossing animated films">Highest-grossing films</a> (<a href="List_of_highest-grossing_openings_for_animated_films" title="List of highest-grossing openings for animated films">Opening weekends</a>)</li>

<li><a href="Outsourcing_of_animation" title="Outsourcing of animation">Outsourcing</a></li>

<li><a href="International_Animation_Day" title="International Animation Day">International Animation Day</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Works</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li>Films

<ul><li><a href="List_of_computer-animated_films" title="List of computer-animated films">Computer-animated</a></li>

<li><a href="Lists_of_animated_films" title="Lists of animated films">Feature-length</a></li>

<li><a href="List_of_lost_or_unfinished_animated_films" title="List of lost or unfinished animated films">Lost or unfinished</a></li>

<li><a href="List_of_animated_package_films" title="List of animated package films">Package</a></li>

<li><a href="List_of_animated_short_films" title="List of animated short films">Short</a></li>

<li><a href="List_of_animated_short_series" class="mw-redirect" title="List of animated short series">Short series</a></li>

<li><a href="List_of_stop_motion_films" title="List of stop motion films">Stop-motion</a></li>

<li><a href="List_of_adult_animated_feature_films" title="List of adult animated feature films">Adult animated films</a></li>

<li><a href="List_of_children's_animated_films" title="List of children's animated films">Children's animated films</a></li></ul></li>

<li><a href="Animated_series" title="Animated series">Series</a>

<ul><li><a href="List_of_adult_animated_television_series" title="List of adult animated television series">Adult animated</a></li>

<li><a href="List_of_children's_animated_television_series" title="List of children's animated television series">Children's animated</a></li>

<li><a href="List_of_computer-animated_television_series" title="List of computer-animated television series">Computer-animated</a></li>

<li><a href="List_of_animated_direct-to-video_series" title="List of animated direct-to-video series">Direct-to-video</a></li>

<li><a href="List_of_Flash_animated_television_series" title="List of Flash animated television series">Flash</a></li>

<li><a href="List_of_animated_Internet_series" title="List of animated Internet series">Internet</a></li>

<li><a href="Lists_of_animated_television_series" title="Lists of animated television series">Television</a></li></ul></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Techniques</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Traditional_animation" title="Traditional animation">Traditional</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Barrier-grid_animation_and_stereography" title="Barrier-grid animation and stereography">Barrier-grid and stereography</a></li>

<li><a href="Limited_animation" title="Limited animation">Limited animation</a></li>

<li><a href="Masking_(art)" title="Masking (art)">Masking</a></li>

<li><a href="Rotoscoping" title="Rotoscoping">Rotoscoping</a></li>

<li><a href="Exposure_sheet" title="Exposure sheet">Exposure sheet</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Stop_motion" title="Stop motion">Stop motion</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Claymation" title="Claymation">Claymation</a>

<ul><li><a href="Clay_painting" title="Clay painting">clay painting</a>, <a href="Strata-cut_animation" title="Strata-cut animation">strata-cut</a></li></ul></li>

<li><a href="Cutout_animation" title="Cutout animation">Cutout</a> (<a href="Silhouette_animation" title="Silhouette animation">silhouette</a>)</li>

<li><a href="Graphic_animation" class="mw-redirect" title="Graphic animation">Graphic</a></li>

<li><a href="Model_animation" title="Model animation">Model</a>

<ul><li><a href="Go_motion" title="Go motion">go motion</a></li></ul></li>

<li><a href="Object_animation" title="Object animation">Object</a>

<ul><li><a href="Brickfilm" title="Brickfilm">Brickfilm</a></li></ul></li>

<li><a href="Pixilation" title="Pixilation">Pixilation</a></li>

<li><a href="Puppetoons" title="Puppetoons">Puppetoons</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Computer_animation" title="Computer animation">Computer</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="2D_computer_graphics" title="2D computer graphics">2D</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="Flash_animation" title="Flash animation">Flash</a></li>

<li><a href="PowerPoint_animation" title="PowerPoint animation">PowerPoint</a></li>

<li><a href="Multi-sketch" title="Multi-sketch">Multi-sketch</a></li>

<li><a href="Onion_skinning" title="Onion skinning">Onion skinning</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="3D_computer_graphics" title="3D computer graphics">3D</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="Cel_shading" title="Cel shading">Cel shading</a></li>

<li><a href="Crowd_simulation" title="Crowd simulation">Crowd</a></li>

<li><a href="Computer_facial_animation" title="Computer facial animation">Facial animation</a></li>

<li><a href="Morph_target_animation" title="Morph target animation">Morph target</a></li>

<li><a href="Motion_capture" title="Motion capture">Motion capture</a>

<ul><li><a href="Facial_motion_capture" title="Facial motion capture">facial</a></li>

<li><a href="Finger_tracking" title="Finger tracking">hand tracking</a></li>

<li><a href="Eye_tracking" title="Eye tracking">eye tracking</a></li></ul></li>

<li><a href="Non-photorealistic_rendering" title="Non-photorealistic rendering">Non-photorealistic rendering</a></li>

<li><a href="Physically_based_animation" title="Physically based animation">Physically based animation</a></li>

<li><a href="Procedural_animation" title="Procedural animation">Procedural</a></li>

<li><a href="Skeletal_animation" title="Skeletal animation">Skeletal</a></li>

<li><a href="Virtual_cinematography" title="Virtual cinematography">Virtual cinematography</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Puppetry" title="Puppetry">Puppetry</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0;background:transparent; font-weight:normal;"><div style="padding:0 0.25em">

<ul><li><a href="Puppet" title="Puppet">Traditional puppetry</a></li>

<li><a href="Digital_puppetry" title="Digital puppetry">Digital puppetry</a>

<ul><li><a href="Machinima" title="Machinima">Machinima</a></li>

<li><a href="Aniforms" title="Aniforms">Aniforms</a></li>

<li><a href="Virtual_human" title="Virtual human">Virtual human</a></li>

<li><a href="Supermarionation" title="Supermarionation">Supermarionation</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Mechanics" title="Mechanics">Mechanical</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Animatronics" title="Animatronics">Animatronics</a>

<ul><li><a href="Audio-Animatronics" title="Audio-Animatronics">Audio-Animatronics</a></li>

<li><a href="Linear_alternator" title="Linear alternator">Linear Animation Generator</a></li></ul></li>

<li><a href="Direct_manipulation_animation" title="Direct manipulation animation">Direct manipulation animation</a></li>

<li><a href="Humanoid_animation" title="Humanoid animation">Humanoid animation</a></li>

<li><a href="Idle_animation" title="Idle animation">Idle animation</a></li>

<li><a href="Ink-wash_animation" class="mw-redirect" title="Ink-wash animation">Ink-wash animation</a></li>

<li><a href="Magic_lantern" title="Magic lantern">Magic Lantern</a></li>

<li><a href="Scanimate" title="Scanimate">Scanimate</a></li>

<li><a href="Shadowmation" title="Shadowmation">Shadowmation</a></li>

<li><a href="Squigglevision" title="Squigglevision">Squigglevision</a></li>

<li><a href="Whiteboard_animation" title="Whiteboard animation">Whiteboard animation</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other methods</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0;background:transparent; font-weight:normal;"><div style="padding:0 0.25em">

<ul><li><a href="Blocking_(animation)" title="Blocking (animation)">Blocking</a></li>

<li><a href="Character_animation" title="Character animation">Character animation</a>

<ul><li><a href="Model_sheet" title="Model sheet">model sheet</a></li>

<li><a href="Walk_cycle" title="Walk cycle">walk cycle</a></li>

<li><a href="Off-model" title="Off-model">off-model</a></li></ul></li>

<li><a href="Chuckimation" class="mw-redirect" title="Chuckimation">Chuckimation</a></li>

<li><a href="Drawn-on-film_animation" title="Drawn-on-film animation">Drawn-on-film</a></li>

<li><a href="Charcoal" title="Charcoal">Erasure animation</a></li>

<li><a href="Hydraulic_engineering" title="Hydraulic engineering">Hydrotechnics</a></li>

<li><a href="Inbetweening" title="Inbetweening">Inbetweening</a></li>

<li><a href="Morphing" title="Morphing">Morphing</a></li>

<li><a href="Paint-on-glass_animation" title="Paint-on-glass animation">Paint-on-glass</a></li>

<li><a href="Pinscreen_animation" title="Pinscreen animation">Pinscreen</a></li>

<li><a href="Pixel_artist" class="mw-redirect" title="Pixel artist">Pixel art</a></li>

<li><a href="Straight_ahead_animation" title="Straight ahead animation">Straight ahead</a></li>

<li><a href="Rubber_hose_animation" title="Rubber hose animation">Rubber hose</a></li>

<li><a href="Special_effects" class="mw-redirect" title="Special effects">Special effects</a></li>

<li><a href="Syncro-Vox" title="Syncro-Vox">Syncro-Vox</a></li>

<li><a href="Zoetrope" title="Zoetrope">Zoetrope</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Variants</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Experimental_animation" title="Experimental animation">Abstract animation</a> (<a href="Visual_music" title="Visual music">visual music</a>)</li>

<li><a href="Adult_animation" title="Adult animation">Adult animation</a></li>

<li><a href="Animated_cartoon" class="mw-redirect" title="Animated cartoon">Animated cartoon</a></li>

<li><a href="Animated_sitcom" title="Animated sitcom">Animated sitcom</a></li>

<li><a href="Animated_documentary" title="Animated documentary">Animated documentary</a></li>

<li><a href="Anime" title="Anime">Anime</a>

<ul><li><a href="Anime-influenced_animation" title="Anime-influenced animation">influenced</a></li></ul></li>

<li><a href="Educational_animation" title="Educational animation">Educational animation</a></li>

<li><a href="Erotic_animation" class="mw-redirect" title="Erotic animation">Erotic animation</a></li>

<li><a href="Independent_animation" title="Independent animation">Independent animation</a></li>

<li><a href="Instructional_animation" class="mw-redirect" title="Instructional animation">Instructional animation</a></li>

<li><a href="Virtual_newscaster" title="Virtual newscaster">Virtual newscaster</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="History_of_animation" title="History of animation">History</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Early_history_of_animation" title="Early history of animation">Early history</a></li>

<li><a href="History_of_computer_animation" title="History of computer animation">History of computer animation</a>

<ul><li><a href="Timeline_of_computer_animation_in_film_and_television" class="mw-redirect" title="Timeline of computer animation in film and television">timeline</a></li></ul></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Related topics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Animation_music" title="Animation music">Animation music</a>

<ul><li><a href="Bouncing_ball_(music)" title="Bouncing ball (music)">Bouncing ball</a></li>

<li><a href="Mickey_Mousing" title="Mickey Mousing">Mickey Mousing</a></li></ul></li>

<li><a href="Key_frame" title="Key frame">Key frame</a></li>

<li><a href="Character_animation" title="Character animation">Character animation</a>

<ul><li><a href="Model_sheet" title="Model sheet">model sheet</a></li>

<li><a href="Walk_cycle" title="Walk cycle">walk cycle</a></li>

<li><a href="Off-model" title="Off-model">off-model</a></li></ul></li>

<li><a href="Creature_animation" title="Creature animation">Creature animation</a></li>

<li><a href="Twelve_basic_principles_of_animation" title="Twelve basic principles of animation">Twelve basic principles</a></li>

<li><a href="Motion_comic" title="Motion comic">Motion comic</a></li>

<li><a href="List_of_films_with_live_action_and_animation" title="List of films with live action and animation">Films with live action and animation</a>

<ul><li><a href="List_of_highest-grossing_live-action/animated_films" title="List of highest-grossing live-action/animated films">highest grossing</a></li></ul></li>

<li><a href="Cartoon" title="Cartoon">Cartoon</a>

<ul><li><a href="Cartoon_physics" title="Cartoon physics">physics</a></li>

<li><a href="Cartoon_violence" title="Cartoon violence">violence</a></li></ul></li>

<li><a href="List_of_most_expensive_animated_films" title="List of most expensive animated films">Most expensive animated films</a></li>

<li><a href="List_of_animated_films_by_box_office_admissions" title="List of animated films by box office admissions">List of animated films by box office admissions</a></li>

<li><a href="List_of_animated_television_series_by_episode_count" title="List of animated television series by episode count">List of animated television series by episode count</a></li></ul>

</div></td></tr><tr><td class="navbox-abovebelow" colspan="2"><div>

<ul><li><span class="noviewer" typeof="mw:File"><span title="Category"></span></span> Category</li>

<li><span class="noviewer" typeof="mw:File"></span> <a href="Portal%3AAnimation" title="Portal:Animation">Portal</a></li>

<li><a href="Outline_of_animation" title="Outline of animation">Outline</a></li></ul>

</div></td></tr></tbody></table></div>

<div class="navbox-styles"></div><div role="navigation" class="navbox" aria-labelledby="World_Wide_Web_Consortium_(W3C)102" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="World_Wide_Web_Consortium_(W3C)102" style="font-size:114%;margin:0 4em"><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C)</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Products,<br>standards</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium#W3C_recommendation_(REC)" title="World Wide Web Consortium">Recommendations</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="ActivityPub" title="ActivityPub">ActivityPub</a></li>

<li><a href="Activity_Streams_(format)" title="Activity Streams (format)">Activity Streams</a></li>

<li><a href="Canonical_XML" title="Canonical XML">Canonical XML</a></li>

<ul>

<li><a href="Flexbox" title="Flexbox">Flexbox</a></li>

<li><a href="Emotion_Markup_Language" title="Emotion Markup Language">EmotionML</a></li>

<li><a href="W3C_Geolocation_API" title="W3C Geolocation API">Geolocation API</a></li>

<li><a href="Indexed_Database_API" title="Indexed Database API">IndexedDB</a></li>

<li><a href="Linked_Data_Notifications" title="Linked Data Notifications">Linked Data Notifications</a></li>

<li><a href="MathML" title="MathML">MathML</a></li>

<li><a href="Micropub_(protocol)" title="Micropub (protocol)">Micropub</a></li>

<ul><li><a href="RDF_Schema" title="RDF Schema">Schema</a></li>

<ul><li><a href="SVG_filter_effects" title="SVG filter effects">Filter Effects</a></li></ul></li>

<li><a href="SCXML" title="SCXML">SCXML</a></li>

<li><a href="SHACL" title="SHACL">SHACL</a></li>

<li><a href="SPARQL" title="SPARQL">SPARQL</a></li>

<li><a href="Timed_text" title="Timed text">Timed text</a></li>

<li><a href="VoiceXML" title="VoiceXML">VoiceXML</a></li>

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>

<li><a href="Web_storage" title="Web storage">Web storage</a></li>

<li><a href="Webmention" title="Webmention">Webmention</a></li>

<li><a href="WebSub" title="WebSub">WebSub</a></li>

<li><a href="WebVTT" title="WebVTT">WebVTT</a></li>

<li><a href="XHTML" title="XHTML">XHTML</a>

<li><a href="XML_Encryption" title="XML Encryption">Encryption</a></li>

<li><a href="XML_Events" title="XML Events">Events</a></li>

<li><a href="XML_Information_Set" title="XML Information Set">Information Set</a></li>

<li><a href="XML_namespace" title="XML namespace">Namespace</a></li>

<li><a href="XML_Schema_(W3C)" title="XML Schema (W3C)">Schema</a></li>

<li><a href="XML_Signature" title="XML Signature">Signature</a></li>

<li><a href="XForms" title="XForms">XForms</a></li>

<li><a href="XInclude" title="XInclude">XInclude</a></li>

<li><a href="XLink" title="XLink">XLink</a></li>

<li><a href="XPath" title="XPath">XPath</a>

<li><a href="XPointer" title="XPointer">XPointer</a></li>

<li><a href="XProc" title="XProc">XProc</a></li>

<li><a href="XQuery" title="XQuery">XQuery</a></li>

<ul><li><a href="XSLT_elements" title="XSLT elements">elements</a></li></ul></li></ul></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Notes</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="IndieAuth" title="IndieAuth">IndieAuth</a></li>

<li><a href="XAdES" title="XAdES">XAdES</a></li>

<li><a href="XHTML%2BSMIL" title="XHTML+SMIL">XHTML+SMIL</a></li>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium#Working_draft_(WD)" title="World Wide Web Consortium">Working drafts</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Call_Control_eXtensible_Markup_Language" title="Call Control eXtensible Markup Language">CCXML</a></li>

<li><a href="CURIE" title="CURIE">CURIE</a></li>

<li><a href="InkML" title="InkML">InkML</a></li>

<li><a href="SMIL_Timesheets" title="SMIL Timesheets">SMIL Timesheets</a></li>

<li><a href="WebGPU" title="WebGPU">WebGPU</a></li>

<li><a href="WebXR" title="WebXR">WebXR</a></li>

<li><a href="XFrames" title="XFrames">XFrames</a></li>

<li><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Guidelines</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Web_Content_Accessibility_Guidelines" title="Web Content Accessibility Guidelines">Web Content Accessibility Guidelines</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Initiative</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Markup Validation Service</a></li>

<li><a href="Web_Accessibility_Initiative" title="Web Accessibility Initiative">Web Accessibility Initiative</a></li>

<li><a href="Web_Components" title="Web Components">Web Components</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Deprecated</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="WebPlatform.org" title="WebPlatform.org">WebPlatform</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Obsoleted</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="XHTML%2BMathML%2BSVG" title="XHTML+MathML+SVG">XHTML+MathML+SVG</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Groups,<br>organizations</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="WHATWG" title="WHATWG">WHATWG</a></li>

<li>Defunct: <a href="World_Wide_Web_Foundation" title="World Wide Web Foundation">World Wide Web Foundation</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Elected</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li>Board</li>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Working</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>

<li><a href="Web_Authentication_Working_Group" title="Web Authentication Working Group">WebAuthn</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Community, business</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Improving_Web_Advertising_Business_Group" title="Improving Web Advertising Business Group">Web Advertising BG</a></li>

<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a> CG</li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Closed</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="W3C_Device_Description_Working_Group" title="W3C Device Description Working Group">Device Description</a> (DDWG)</li>

<li><a href="W3C_MMI" title="W3C MMI">Multimodal Interaction Activity</a> (MMI)</li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Software</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="CERN_httpd" title="CERN httpd">CERN httpd</a></li>

<li><a href="Libwww" title="Libwww">Libwww</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Web_browser" title="Web browser">Browsers</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="Arena_(web_browser)" title="Arena (web browser)">Arena</a> (1993–98)</li>

<li><a href="Agora_(web_browser)" title="Agora (web browser)">Agora</a> (1994–97)</li>

<li><a href="Amaya_(web_editor)" title="Amaya (web editor)">Amaya</a> (browser/editor, 1996–2012)</li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Conferences</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="The_Web_Conference" title="The Web Conference">International World Wide Web Conference</a> (IW3C)

<ul><li><a href="International_World_Wide_Web_Conference_Committee" title="International World Wide Web Conference Committee">Steering Committee</a> (IW3C2)</li>

<li><a href="First_International_Conference_on_the_World-Wide_Web" title="First International Conference on the World-Wide Web">First conference</a> ("WWW1", 1994)</li></ul></li></ul>

</div></td></tr></tbody></table></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .asbox{position:relative;overflow:hidden}.mw-parser-output .asbox table{background:transparent}.mw-parser-output .asbox p{margin:0}.mw-parser-output .asbox p+p{margin-top:0.25em}.mw-parser-output .asbox-body{font-style:italic}.mw-parser-output .asbox-note{font-size:smaller}.mw-parser-output .asbox .navbar{position:absolute;top:-0.75em;right:1em;display:none}.mw-parser-output :not(p):not(.asbox)+style+.asbox,.mw-parser-output :not(p):not(.asbox)+link+.asbox{margin-top:3em}

/* end https://en.wikipedia.org/ */

</style>

</div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-04-12" href="https://en.wikipedia.org/wiki/?title=CSS_animations&oldid=1285264189">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>